<template>
	<view class="personal">
		<view class="header">
		  <!-- 登录状态 -->
          <template v-if="userInfo.nickName">
            <image class="img" src="/static/images/personal/我的头像.jpg" mode=""></image>
            <text>Lime(青柠)</text>
            <button class="exit" @click="exit">退</button>
          </template>
      
          <!-- 未登录状态 -->
          <template v-else>
            <image class="img" src="/static/images/personal/personal.png" mode=""></image>
            <text class="login" @click="toLogin">去登录</text>
          </template>
		</view>
	
    <!-- 这是中间的部分区域 -->
        <view class="center">
            <view class="order">
                <h2>我的订单</h2>
                <h1><a href="#">查看全部 ></a></h1>
            </view>
            <view class="orders">
                <view class="box1">
                    <image class="img1" src="/static/images/personal/daishouhuo.png" mode=""></image>
                    <text>待付款</text>
                </view>
                <view class="box1">
                    <image class="img1" src="/static/images/personal/fujin.png" mode=""></image>
                    <text>带分享</text>
                </view>
                <view class="box1">
                    <image class="img1" src="/static/images/personal/ershouche.png" mode=""></image>
                    <text>代发货</text>
                </view>
                <view class="box1">
                    <image class="img1" src="/static/images/personal/chongwu.png" mode=""></image>
                    <text>待收货</text>
                </view>
                <view class="box1">
                    <image class="img1" src="/static/images/personal/cuxiao.png" mode=""></image>
                    <text>待评价</text>
                </view>
            </view>
       
            <view class="wallet">
                <view class="wallets">
                    <h2>多多钱包</h2>
                    <h1><a href="#">42.50元优惠待领取 ></a></h1>
                </view>
                <view class="orders">
                    <view class="box1">
                        <image class="img1" src="/static/images/personal/wallet/kefurexian.png" mode=""></image>
                        <text>客服服务</text>
                    </view>
                    <view class="box1">
                        <image class="img1" src="/static/images/personal/wallet/yinhangka.png" mode=""></image>
                        <text>绑定银行</text>
                    </view>
                    <view class="box1">
                        <image class="img1" src="/static/images/personal/wallet/rexiaopaihangbeifen.png" mode=""></image>
                        <text>热销排行</text>
                    </view>
                    <view class="box1">
                        <image class="img1" src="/static/images/personal/wallet/mairu.png" mode=""></image>
                        <text>总共买入</text>
                    </view>
                    <view class="box1">
                        <image class="img1" src="/static/images/personal/wallet/quxian.png" mode=""></image>
                        <text>取现方式</text>
                    </view>
                </view>
                
                <view class="footers">
                    <h2>儿童乐园</h2>
                    <h1><a href="#">更多福利待你领取 ></a></h1>
                </view>
                <!-- 这是底部区域 -->
                <!-- 底层一楼 -->
                <view class="footer">
                    <view class="box1">
                        <image class="img1" src="/static/images/personal/icon-footer/icon_k5i1xt3aou/lianyiqun.png" mode=""></image>
                        <text>连衣裙</text>
                    </view>
                    <view class="box1">
                        <image class="img1" src="/static/images/personal/icon-footer/icon_k5i1xt3aou/wazi.png" mode=""></image>
                        <text>新款袜</text>
                    </view>
                    <view class="box1">
                        <image class="img1" src="/static/images/personal/icon-footer/icon_k5i1xt3aou/shoutao.png" mode=""></image>
                        <text>手套儿</text>
                    </view>
                    <view class="box1">
                        <image class="img1" src="/static/images/personal/icon-footer/icon_k5i1xt3aou/xiaoxiongwanju.png" mode=""></image>
                        <text>小熊熊</text>
                    </view>
                    <view class="box1">
                        <image class="img1" src="/static/images/personal/icon-footer/icon_k5i1xt3aou/jimu.png" mode=""></image>
                        <text>新积木</text>
                    </view>
                </view>
                
                <!-- 底层二楼 -->
                <view class="footer">
                    <view class="box1">
                        <image class="img1" src="/static/images/personal/icon-footer/icon_k5i1xt3aou/jinzita.png" mode=""></image>
                        <text>金字塔</text>
                    </view>
                    <view class="box1">
                        <image class="img1" src="/static/images/personal/icon-footer/icon_k5i1xt3aou/konglong.png" mode=""></image>
                        <text>恐龙龙</text>
                    </view>
                    <view class="box1">
                        <image class="img1" src="/static/images/personal/icon-footer/icon_k5i1xt3aou/suliaojimu.png" mode=""></image>
                        <text>塑胶木</text>
                    </view>
                    <view class="box1">
                        <image class="img1" src="/static/images/personal/icon-footer/icon_k5i1xt3aou/nvying.png" mode=""></image>
                        <text>玩具枪</text>
                    </view>
                    <view class="box1">
                        <image class="img1" src="/static/images/tabBar/tab-cate.png" mode=""></image>
                        <text>大设置</text>
                    </view>
                </view>
            </view>
        
           
        </view>
    
       
    </view>
</template>

<script>
    import request from '../../utils/request.js'
	export default {
		data() {
			return {
				userInfo:{},  //这是用于存储个人信息的
			};
		},
    mounted(){
      //从本地存储里面读取数据==》只是基本信息(昵称，头像)唯一标记都没有
      wx.getStorage({
        key: 'userInfo',
        success:(res)=>{
          // console.log(res.data);
          if(res.data){
            this.userInfo=JSON.parse(res.data)
          }
        }
      })
      

      //调用接口获取登录凭证（code）
      wx.login({
        success:async res => {
          if (res.code) {
            let code = res.code;
            const token=await request('/getOpenId',{code});
            console.log(token);
          } else {
            console.log('登录失败！' + res.errMsg)
          }
        }
      }) 
    },
    methods:{
      toLogin(){
        //关闭所有页面，打开到应用内的某个页面
        wx.reLaunch({
          url:'/pages/login/login'
        })
      },
      exit(){
        //点击退出按钮，清空用户信息
        wx.setStorage({
          key:"userInfo",
          data:""
        })
        //点击退出去登陆页面
        wx.reLaunch({
          url:'/pages/login/login'
        })
      }
    }
	}
</script>

<style lang="stylus">
  .personal
    .header
      height: 200rpx
      line-height: 200rpx
      background-color:#dcecfd
      display: flex
      .img 
        height:100rpx
        width:100rpx
        vertical-align: middle
        margin: 50rpx
      .exit{
          left:74px;
          height:80rpx;
          line-height: 80rpx
        }

    .center
        width:100%
        height:90rpx
        background-color:#e7a96c
        .order
            width:100%
            height:100rpx
            display:flex
            justify-content:space-between
            h2
                margin-top:19rpx
                margin-left:10rpx
                font-size:36rpx
                font-weight:650
            h1
                margin-right:6rpx
                margin-top:29rpx
                font-size:22rpx
       
        .orders
            display: flex
            width:100%
            height:200rpx
            .box1
                margin-left:26rpx
                width:120rpx
                height:200rpx
                .img1
                    margin-top:20rpx
                    text-align: center
                    width:110rpx
                    height:110rpx
                text
                    margin-left:18rpx
                    text-align: center
                    font-size:24rpx
         
        .wallet
            margin-top:10rpx
            width:100%
            height:90rpx
            .wallets
                width:100%
                height:90rpx
                display:flex
                justify-content:space-between
                background-color:#ee709c
                h2
                    margin-top:19rpx
                    margin-left:10rpx
                    font-size:36rpx
                    font-weight:650
                    color:#fff
                h1
                    margin-right:6rpx
                    margin-top:29rpx
                    font-size:22rpx
                    color:#fff
            .orders
                margin-top:10rpx
                display: flex
                width:100%
                height:200rpx
                .box1
                    margin-left:26rpx
                    width:120rpx
                    height:200rpx
                    .img1
                        margin-top:20rpx
                        text-align: center
                        width:110rpx
                        height:110rpx
                    text
                        margin-left:8rpx
                        text-align: center
                        font-size:24rpx    
            
            .footers
                display:flex
                margin-top:10rpx
                width:100%
                height:90rpx
                justify-content:space-between
                background-color:#64dba7
                h2
                    margin-top:19rpx
                    margin-left:10rpx
                    font-size:36rpx
                    font-weight:650
                    color:#fff
                h1
                    margin-right:6rpx
                    margin-top:29rpx
                    font-size:22rpx
                    color:#fff
            
            .footer
                display: flex
                margin-top:10rpx
                width:100%
                height:200rpx
                
                .box1
                    margin-top:10rpx
                    margin-left:26rpx
                    width:120rpx
                    height:200rpx
                    .img1
                        margin-top:20rpx
                        text-align: center
                        width:110rpx
                        height:110rpx
                    text
                        margin-left:18rpx
                        text-align: center
                        font-size:24rpx
                
                    
                    
</style>
